import React, { PureComponent } from 'react';
import { Typography, List, Card, Icon, Popover, Form, Radio, Input } from 'antd';
import styles from './index.less';
import { withRemove } from './index';
import GoodsModal from '../GoodsModal';

const { Text } = Typography;

@withRemove
class ItemGoodsComponent extends PureComponent {
  constructor(props) {
    super(props);
    const { title, scroll = '', content } = this.props.data;
    this.state = {
      title,
      scroll,
      content: content || [],
      // 初次添加，默认打开选择弹框
      visible: typeof content === 'undefined',
    };
  }

  handleChange = type => e => {
    const { value } = e.target;
    const { data } = { ...this.props };
    data[type] = value;
    if (type === 'title') data.hideTitle = !value;
    this.props.onChange(data);
    this.setState({ [type]: value });
  };

  handleRemove = spuCode => {
    this.setState(prevState => {
      const content = prevState.content.filter(v => v.spuCode !== spuCode);
      const { data } = { ...this.props };
      data.content = content;
      this.props.onChange(data);
      return { content };
    });
  };

  handleGoodsSelection = (skuData, skuCode, spuData) => {
    const { data } = { ...this.props };
    let { content } = { ...this.state };
    content = content.concat(spuData);
    data.content = content;
    this.props.onChange(data);
    this.setState({ content });
  };

  render() {
    const { title, scroll, content, visible } = this.state;
    return (
      <div className={styles.itemGoods}>
        <Popover
          placement="right"
          trigger="click"
          content={
            <>
              <Form.Item label="标题内容" className={styles.mb0}>
                <Input
                  placeholder="输入标题内容"
                  value={title}
                  onChange={this.handleChange('title')}
                />
              </Form.Item>
              <Form.Item label="展示类型" className={styles.mb0}>
                <Radio.Group value={scroll} onChange={this.handleChange('scroll')}>
                  <Radio value="">列表展示</Radio>
                  <Radio value="scroll">滚动展示</Radio>
                </Radio.Group>
              </Form.Item>
            </>
          }
        >
          <Typography>
            <Text type={title ? '' : 'secondary'}>
              {title ? `${title}（同类商品）` : '这里编辑标题（同类商品）'}
            </Text>
          </Typography>
        </Popover>
        <List
          grid={{
            column: 3,
            gutter: 10,
          }}
          className={styles[scroll]}
          dataSource={content.concat({})}
          renderItem={item => (
            <List.Item>
              {item.spuCode ? (
                <Card hoverable cover={<img src={item.logoImageUrl} alt="" height={95} />}>
                  <Card.Meta title={item.productName} description={item.productDesc} />
                  <Text type="danger">{item.salePrice}</Text>
                  <br />
                  <Text delete>{item.price}</Text>
                  <Icon
                    type="close-circle"
                    theme="twoTone"
                    onClick={() => this.handleRemove(item.spuCode)}
                  />
                </Card>
              ) : (
                <Card hoverable className="add" onClick={() => this.setState({ visible: true })}>
                  <Icon type="plus" />
                </Card>
              )}
            </List.Item>
          )}
        />
        <GoodsModal
          selectAll
          saleType="no"
          visible={visible}
          expanded={false}
          onSuccess={this.handleGoodsSelection}
          disabledRowKeys={content.map(v => v.spuCode)}
          onCancel={() => this.setState({ visible: false })}
        />
      </div>
    );
  }
}
export default ItemGoodsComponent;
